<template>
    <div class="dbg f-pr f-tac">
        <swiper :options="swiperOptions">
            <swiper-slide v-for="i in 5" :key="i" :class="['swiper-slide',`slide${i}`]">
                <a class="swiper-link" target="_blank" :href="$route.query.c?`//www.midoogame.com/wapauth/downapp?c=${$route.query.c}`:'//www.midoogame.com/wapauth/downapp'">

                    <p v-if="qrcodeImg&&width" :class="['qrcode f-pa',`qrcode${i}`]"><img :src="qrcodeImg" alt="二维码图片"></p>
                    <img :src="`//www.midoogame.com/md_static/img/c${i}.png`" :class="['f-csp down-img',`down-img${i}`]" v-if="width"/>
                    <!--<img src="../assets/d1.jpg" class="f-w100"/>-->
                </a>
            </swiper-slide>
        </swiper>

        <img src='//www.midoogame.com/md_static/img/up.png' v-if="width" class='up-img f-pf'>
        <!--<div  v-for="i in 5" :key="i" class="dbg f-pr">
            <p v-if="qrcodeImg" :class="['qrcode f-pa',`qrcode${i}`]"><img :src="qrcodeImg" alt="二维码图片"></p>
            <img :src="`//www.midoogame.com/md_static/img/c${i}.png`" :alt="`第${i}张`" :class="['f-csp down-img f-w60',`down-img${i}`]">
        </div>-->
    </div>
</template>

<script>
/*import Page from '@/components/Page';
import Banner from '@/components/Banner';
import PageController from '@/components/PageController';*/
export default {
  name: 'download',
  data() {
    return {
        width:null,
        swiperOptions:{
            direction : 'vertical',
            mousewheel: true,
        },
        qrcodeImg:'',
    }
  },
  methods: {
      
  },
  created(){
    this.width=window.innerWidth>640?true:false;
    if(!this.width) return;
    const code=this.$route.query.c;
    if(code){
        this.$ajax.Download.main(code).then(({data:{sendstatus,data:{qrcode}}})=>{
            if(sendstatus==200){
                this.qrcodeImg=qrcode
            }
        })
    }
  },
  mounted() {
      
  }
}
</script>
<style scoped lang="less">
.f-w60{width:60%;}
.down-img1{width:45%;}
.swiper-container {
    width: 100%;
    height:100%;
}
.dbg{
    height: 100vh;
}
.down-img2,.down-img3,.down-img4,.down-img5{width:40%;padding-top: 10%;}
@media (max-width: 640px){
    .swiper-link{
        position: absolute;
        width:100vw;
        height:100vh;
        bottom:0;
        left:0;
    }
    
    .slide1{
        background:url('../assets/d1.jpg') no-repeat center center/100%;
    }
    .slide2{
        background:url('../assets/d2.jpg') no-repeat center center/100%;
    }
    .slide3{
        background:url('../assets/d5.jpg') no-repeat center center/100%;
    }
    .slide4{
        background:url('../assets/d4.jpg') no-repeat center center/100%;
    }
    .slide5{
        background:url('../assets/d3.jpg') no-repeat center center/100%;
    }
}
@media (min-width:1000px){
    .dbg{
        background:url('http://www.midoogame.com/md_static/img/pro_bg.png') center center/100% no-repeat;
    }
}
@media (min-width: 640px) and(max-width: 1368px){
    /*.dbg{
        height: 72vh;
    }*/
    .qrcode img{
        width:2rem;
    }
    .qrcode1{
        bottom:18.8%;
        right:27.5%;
    }
    .down-img1{
        padding-top: 12.5%;
    }
    .qrcode2,.qrcode3,.qrcode4,.qrcode5{
        right:29.5%;
        bottom:28.5%;
    }
}
@media (min-width: 1369px) and (max-width: 1441px){
    /*.dbg{
        height: 72vh;
    }*/
    .qrcode img{
        width:2.1rem;
    }
    .qrcode1{
        bottom: 14.5%;
        right: 27.5%;
    }
    .down-img1{
        padding-top: 12.5%;
    }
    .qrcode2,.qrcode3,.qrcode4,.qrcode5{
        right:29.5%;
        bottom:25%;
    }
}
    
@media (min-width: 1441px){
    /*.dbg{
        height: 79vh;
    }*/
    .qrcode1{
        bottom:10.2%;
        right:27.5%;
    }
    .qrcode img{
        width:210px;
    }
    .qrcode2,.qrcode3,.qrcode4,.qrcode5{
        bottom:21%;
        right:29.5%;
    }
    .down-img1{
        padding-top: 12.5%;
    }
}



.drop-img,.up-img{
    z-index: 9;
    bottom:5%;
    left:50%;
    width:.6rem;
    transform: translateX(-50%);
}

</style>
